
<template>
    <div>
        <a-modal
        :title="isView?'查看':(fromState.id?'编辑':'新增')"
        :visible="visible"
        @ok="handleOk"
        @cancel="visible = false"
        :width=800
        class="leave-manage-modal"
        >
            <a-form layout="horizontal" :form="form" v-if="visible" :key="compSelectorkey">
                <!-- <a-form-item label="审评员姓名">
                    <a-input
                    v-if="!isView"
                    style="width: 182px;"
                     placeholder="请输入审评员姓名" 
                     v-model:value="fromState.fxm"
                     v-decorator="['fxm', { initialValue:fromState.fxm, rules: rules.fxm}]"
                    />
                    <span v-else>{{ fromState.fxm }}</span>
                </a-form-item> -->
                <a-form-item label="请假开始时间" >
                    <a-date-picker
                    v-if="!isView"
                    placeholder="请输入开始时间" 
                    format="YYYY-MM-DD hh:mm"
                    v-model:value="fromState.fqjkssj"
                    v-decorator="['fqjkssj', { initialValue:fromState.fqjkssj, rules: rules.fqjkssj}]"
                    />
                    <span v-else>{{ moment(fromState.fqjkssj).format('YYYY-MM-DD') }}</span>
                </a-form-item>
                <a-form-item label="请假结束时间">
                    <a-date-picker
                    v-if="!isView"
                    placeholder="请输入结束时间" 
                    format="YYYY-MM-DD hh:mm"
                    v-model:value="fromState.fqjjssj"
                    v-decorator="['fqjjssj', { initialValue:fromState.fqjjssj, rules: rules.fqjjssj}]"
                    />
                    <span v-else>{{ moment(fromState.fqjjssj).format('YYYY-MM-DD') }}</span>
                </a-form-item>
                
                <a-form-item label="请假事由">
                    <a-textarea 
                        :readOnly="isView"
                        placeholder="请输入请假事由" 
                        v-model:value="fromState.fqjsy"
                        v-decorator="['fqjsy', { initialValue:fromState.fqjsy, rules: rules.fqjsy}]"
                        :autosize="{ minRows: 3, maxRows: 10000 }"
                    ></a-textarea>
                </a-form-item>
            </a-form>
            <template slot="footer">
                <div>
                    <a-button @click="visible = false" >{{isView?'关闭':'取消'}}</a-button>
                    <!-- <a-button v-if="!isView" class="blue-btn" style="margin-left: 15px;" @click="handleOk(true)" type="primary">保存</a-button> -->
                    <a-button v-if="!isView" class="blue-btn" style="margin-left: 15px;" @click="handleOk(false)" type="primary">确定</a-button>
                </div>
            </template>
        </a-modal>
    </div>
</template>
<script>
import moment from 'moment'
import { jcygladdQj } from './service/index'
export default {
    components:{

    },
    props:{

    },
    data(){
        return{
            moment:moment,
            visible:false,
            isView:false,
            form:this.$form.createForm(this, { name: 'trainingRecordsFrom' }),
            fromState:{},
            compSelectorkey:null,
            rules:{
                fqjkssj: [{
                    type:'object',
                    required: true,
                    message: '请选择请假开始时间',
                }],
                fqjjssj: [{
                    type:'object',
                    required: true,
                    message: '请选择请假结束时间',
                }],
                fxm: [{
                    required: true,
                    message: '请输入审评员姓名',
                }],
                fqjsy: [{
                    required: true,
                    message: '请输入请假事由',
                }],
                
            },
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        getData(row,val){
            this.fromState = row
            this.isView = val
            this.compSelectorkey = Date.now()
        },
        handleOk(val){
            this.form.validateFields((err, values) => {
                if(!err){
                    let data = {
                        ...this.fromState,
                        fqjkssj:moment(this.fromState.fqjkssj).format('YYYY-MM-DD hh:mm'),
                        fqjjssj:moment(this.fromState.fqjjssj).format('YYYY-MM-DD hh:mm'),
                    }

                    jcygladdQj(data).then(res=>{
                        if(res.code == 200){
                            this.visible = val
                            this.$emit('successReturn')
                            this.$message.success(res.message)
                        }else{
                            this.$message.warning(res.message)
                        }
                    })
                }
            })
            
        },
    }
}
</script>
<style lang="less">
.leave-manage-modal{
    .ant-form-item{
        display: flex;
        .ant-form-item-label{
            width: 110px;
        }
        .ant-form-item-control-wrapper{
            flex: 1;
        }
    }
}
</style>